@import (reference) "@/styles/variables.less";

.profile-page {
  .profile-page__header {
    padding-bottom: @spacing-xl;
  border-bottom: 1px solid @gray-200;

    .profile-page__title {
      font-size: @font-size-3xl;
  font-weight: 700;
  color: @gray-900;
    }

    .profile-page__description {
      color: @gray-600;
  margin-top: @spacing-sm;
    }
  }

  .profile-page__content {
    & > * + * {
    margin-top: @spacing-2xl;
  }

    .profile-page__layout {
      display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: @spacing-2xl;
  
  @media (min-width: @screen-lg) {
    grid-template-columns: repeat(3, 1fr);
  }

      .profile-page__sidebar {
        @media (min-width: @screen-lg) {
    grid-column: span 1;
  }
      }

      .profile-page__main {
        @media (min-width: @screen-lg) {
    grid-column: span 2;
  }
      }
    }

    .profile-page__avatar-section {
      .card();
  padding: @spacing-xl;
  text-align: center;

      .profile-page__avatar-container {
        position: relative;
  display: inline-block;
  margin-bottom: @spacing-lg;

        .profile-page__avatar {
          width: 96px;
  height: 96px;
  border-radius: 9999px;
  object-fit: cover;
  margin: 0 auto;
        }

        .profile-page__avatar-edit {
          position: absolute;
  bottom: 0;
  right: 0;
  background: @blue-500;
  color: @white;
  padding: @spacing-xs;
  border-radius: 9999px;
  transition: color @transition-normal;
  
  &:hover {
    background: @blue-600;
  }
        }
      }

      .profile-page__user-name {
        font-size: @font-size-xl;
  font-weight: 600;
  color: @gray-900;
      }

      .profile-page__user-role {
        color: @gray-600;
  font-size: @font-size-sm;
      }

      .profile-page__user-stats {
        display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: @spacing-lg;
  margin-top: @spacing-lg;

        .profile-page__stat {
          text-align: center;

          .profile-page__stat-value {
            font-size: @font-size-lg;
  font-weight: 700;
  color: @gray-900;
          }

          .profile-page__stat-label {
            font-size: @font-size-sm;
  color: @gray-600;
          }
        }
      }
    }

    .profile-page__info-section {
      .card();
  padding: @spacing-xl;

      .profile-page__section-header {
        margin-bottom: @spacing-xl;

        .profile-page__section-title {
          font-size: @font-size-xl;
  font-weight: 600;
  color: @gray-900;
        }

        .profile-page__section-description {
          color: @gray-600;
  margin-top: @spacing-xs;
        }
      }

      .profile-page__info-group {
        display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: @spacing-xl;
  
  @media (min-width: @screen-md) {
    grid-template-columns: repeat(2, 1fr);
  }

        .profile-page__field {
          & > * + * {
    margin-top: @spacing-sm;
  }

          .profile-page__field-label {
            display: block;
  font-size: @font-size-sm;
  font-weight: 500;
  color: @gray-700;
          }

          .profile-page__field-input {
            width: 100%;
  padding: @spacing-sm;
  border: 1px solid @gray-300;
  border-radius: @border-radius-lg;
  
  &:focus {
    outline: none;
    border-color: @blue-500;
    box-shadow: 0 0 0 2px fade(@blue-500, 20%);
  }
          }

          .profile-page__field-readonly {
            padding: @spacing-sm;
  color: @gray-900;
  background: @gray-50;
  border-radius: @border-radius-lg;
          }
        }
      }

      .profile-page__action-buttons {
        display: flex;
  align-items: center;
  gap: @spacing-md;
  margin-top: @spacing-xl;

        .profile-page__action-button {
          .btn();

          &.profile-page__action-button--primary {
            .btn-primary();
          }

          &.profile-page__action-button--secondary {
            .btn-outline();
          }
        }
      }
    }

    .profile-page__preferences-section {
      .card();
  padding: @spacing-xl;

      .profile-page__section-header {
        margin-bottom: @spacing-xl;

        .profile-page__section-title {
          font-size: @font-size-xl;
  font-weight: 600;
  color: @gray-900;
        }

        .profile-page__section-description {
          color: @gray-600;
  margin-top: @spacing-xs;
        }
      }

      .profile-page__preferences-grid {
        display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: @spacing-xl;
  
  @media (min-width: @screen-md) {
    grid-template-columns: repeat(2, 1fr);
  }

        .profile-page__preference-item {
          & > * + * {
    margin-top: @spacing-sm;
  }

          .profile-page__preference-label {
            display: block;
  font-size: @font-size-sm;
  font-weight: 500;
  color: @gray-700;
          }

          .profile-page__preference-select {
            width: 100%;
  padding: @spacing-sm;
  border: 1px solid @gray-300;
  border-radius: @border-radius-lg;
  
  &:focus {
    outline: none;
    border-color: @blue-500;
    box-shadow: 0 0 0 2px fade(@blue-500, 20%);
  }
          }

          .profile-page__preference-checkbox {
            display: flex;
  align-items: center;
  gap: @spacing-sm;

            input {
              border-radius: @border-radius;
  border-color: @gray-300;
  color: @blue-600;
  
  &:focus {
    box-shadow: 0 0 0 2px fade(@blue-500, 20%);
  }
            }

            span {
              font-size: @font-size-sm;
  color: @gray-700;
            }
          }
        }
      }
    }

    .profile-page__activity-section {
      .card();
  padding: @spacing-xl;

      .profile-page__section-header {
        margin-bottom: @spacing-xl;

        .profile-page__section-title {
          font-size: @font-size-xl;
  font-weight: 600;
  color: @gray-900;
        }
      }

      .profile-page__activity-list {
        & > * + * {
    margin-top: @spacing-lg;
  }

        .profile-page__activity-item {
          display: flex;
  align-items: center;
  gap: @spacing-lg;
  padding: @spacing-md;
  background: @gray-50;
  border-radius: @border-radius-lg;

          .profile-page__activity-icon {
            width: 32px;
  height: 32px;
  color: @blue-500;
          }

          .profile-page__activity-content {
            flex: 1;

            .profile-page__activity-title {
              font-weight: 500;
  color: @gray-900;
            }

            .profile-page__activity-description {
              font-size: @font-size-sm;
  color: @gray-600;
            }

            .profile-page__activity-time {
              font-size: @font-size-xs;
  color: @gray-500;
            }
          }
        }
      }
    }

    .profile-page__welcome-card {
      .card();
  padding: @spacing-3xl;
  text-align: center;
  transition: all @transition-slow;

      &:hover {
        transform: scale(1.02);
  box-shadow: @shadow-lg;
      }

      .profile-page__welcome-icon {
        width: 64px;
  height: 64px;
  color: @gray-400;
  margin: 0 auto @spacing-xl auto;
      }

      .profile-page__welcome-title {
        font-size: @font-size-xl;
  font-weight: 600;
  color: @gray-900;
  margin-bottom: @spacing-lg;
      }

      .profile-page__welcome-text {
        color: @gray-600;
      }
    }
  }

  // 响应式设计
  @media (max-width: @screen-md) {
    .profile-page__content {
      .profile-page__layout {
        grid-template-columns: repeat(1, 1fr);

        .profile-page__sidebar {
          order: 2;
        }

        .profile-page__main {
          order: 1;
        }
      }

      .profile-page__info-group {
        grid-template-columns: repeat(1, 1fr);
      }

      .profile-page__preferences-grid {
        grid-template-columns: repeat(1, 1fr);
      }

      .profile-page__action-buttons {
        display: flex;
  flex-direction: column;
  & > * + * {
    margin-top: @spacing-md;
  }

        .profile-page__action-button {
          width: 100%;
        }
      }
    }
  }

  @media (max-width: @screen-sm) {
    .profile-page__header {
      text-align: center;
    }
  }
}